
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Layout, Button, theme, Space } from 'antd';
import { useState, useEffect } from 'react'
// 导入事件中央总线
import eventbus from '@/utils/myevents'
// 引入面包屑导航组件
import Appbreadcrumb from './Appbreadcrumb';
// 引入下拉菜单组件
import Appdropdown from './Appdropdown';
const { Header } = Layout;

type Props = {}
export default function Appheader({ }: Props) {
    const [collapsed, setCollapsed] = useState<boolean>(false)
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    useEffect(() => {
        // 实现兄弟组件通信
        // 语法:    eventbus.emit('自定义事件',要传递的数据)
        //console.log('collapsed', collapsed); //fasle
        eventbus.emit('myevent', collapsed)
    }, [collapsed])
    return (
        <Header style={{ padding: 0, background: colorBgContainer }}>
            <Space style={{
                display: 'flex',
                justifyContent: "space-between",
                alignItems: 'center',
                paddingRight: '24px'
            }}>
                <Space>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => {
                            // 函数组件中的set修改数据的方式是异步的
                            setCollapsed(!collapsed)
                        }
                        }
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    {/* 面包屑导航组件 */}
                    <Appbreadcrumb></Appbreadcrumb>
                </Space>
                {/* 退出登录组件/下拉菜单组件 */}
                <Appdropdown></Appdropdown>

            </Space>
        </Header>
    )
}